<html>
    <title>
    </title>
    <head>
        <link rel="stylesheet" href="/css/bootstrap.css" type="text/css"/>
        <script src="/js/bootstrap.js"></script>
        <script src="/js/jquery.min.js"></script>
       
           
        
    <meta name="viewport" content="width=320,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta content="">
    <style>
       .navbar{
           background-color: #34495E;
           height: 50px;
           display: block;
       }
       .navbar .nav-list{
           z-index: 0;
           display: block;

       }
       .navbar .nav-list li{
           list-style: none;
           float: left;
           margin-left: 30px;
       }
       .navbar .nav-list a{
           color: white;
           line-height: 50px;
           text-decoration-line: none;
       }
       .navbar .nav-list  a:hover{
           color: #1ABC9C;

       }
       .navbar input:checked~.nav-list {
           position: absolute;
           padding-bottom: 5px;
           padding-left: 5px;
           padding-right: 5px;
            display: block;
            background-color: #34495E;
            z-index: 0;
            margin-top: 50px;

       }
       .navbar input:checked~.nav-list li{
        clear: both;
        background-color: #34495E;

       }
       .navbar label{
           display: none;
       }
       .navbar .nav-toggle{
           display: none;
       }
       @media screen and (max-width: 600px) {
           .navbar .nav-toggle{
               display: none;
           }
           .navbar label{
               display: block;
               z-index: 4;
           }
           .navbar .nav-list{
               display: none;
               margin-left: 0px;
           }
           .navbar .nav-list li{
               margin-left: 0px;
           }
           .navbar  .menu-icon{
                display: block;
                float: left;
                width: 36px;
                height: 26px;
                line-height: 0;
                padding-top: 10px;
                text-align: center;

           }
           .navbar  .menu-icon>svg path{
                fill: white;
           }
           .navbar  label[for="nav-toggler"] {
                display: block;
                float: left;
                width: 36px;
                height: 36px;
                z-index: 2;
                cursor: pointer;
            }
       }
       
            .row {
                margin-left: -20px;
                *zoom: 1;
            }
             .row:before,
            .row:after {
                display: table;
                line-height: 0;
                content: "";
            }
            .row:after {
                clear: both;
            }
            [class*="span"] {
                float: left;
                min-height: 1px;
                margin-left: 20px;
            }
            .span2 {
                width: 580px;
            }
            .span1 {
                width: 380px;
                
            }
            .info1{
                /* width: 400px;
                height: 400px; */
                display: block;
                /* text-align: center; */
                /* flex-flow:column; */
            }
            .info1 table{
                margin-left: 23%;
                border:0px;
                
                
            }
            table tr{
                display: flex;
                /* align-items: center; */
                justify-content:left;
                /* outline: none; */
            }
            .info1 h1{
                margin: 0px auto auto 0px;
            }
    </style>
  </head>
  <body>
    <header>

        <nav class="navbar">
            <input type="checkbox" id="nav-toggle" class="nav-toggle"/>
            <label for="nav-toggle">
                <span class="menu-icon">
                    <svg viewBox="0 0 18 15" width="18px" height="15px">
                        <path fill="white" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
                        <path fill="white" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
                        <path fill="white" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
                   </svg>
              </span>
            </label>
            <ul class="nav-list" >
                <li><a >菜单</a></li>
                <li><a href="#info1">99乘法表</a></li>
                <li><a href="#info2">科学家</a></li>
                <li><a href="#info3">联系我</a></li>
            </ul>
        </nav>
        
    </header>
       
        <div class="info1" id="info1">
  <h1>99乘法表</h1>  
        <script>
            document.write('<table border=1>');
            for (var i=1;i<=9;i++) {
                document.write('<tr>');
                for (var j=1;j<=i;j++) {
                    document.write('<th>');
                    document.write(i,'x',j,'=',i*j);
                    document.write('<br/>');
                    document.write('</th>');
                }
                document.write('</tr>');
            }
                document.write('</table>');
            
            </script> </div>
            <div  style=" margin-left: 31%;   border:0px;">
                <input id="btn1" type="button" value="变换" >
                <input id="btn2" type="button" value="恢复" >
            </div>
            <script>
                $("#btn1").click(function(){
                    $("tr").css("justify-content","center");
                });
                $("#btn2").click(function(){
                    $("tr").css("justify-content","left");
                });
            </script>
             <br>
             
<br>
<br>
<br>
<br>
<br>
<br>
      
             <h2>科学家</h2>
           <div id="info2" class="container"> 
            
           <div class="row">
               <div  class="span10">
                 <div style="text-align: center;">  <img class="content" src="/images/ads.jpg"/></div>
                   <p style="width: 300px;">托马斯·阿尔瓦·爱迪生（Thomas Alva Edison，1847年2月11日—1931年10月18日），出生于美国俄亥俄州米兰镇，逝世于美国新泽西州西奥兰治。世界著名的发明家、物理学家、企业家，拥有众多知名重要的发明专利超过2000项，被传媒授予“门洛帕克的奇才”称号</p>
               </div>
              <div class="span100">
                <div style="text-align: center;">  <img class="content" src="/images/lbnc.jpg" width="150" height="150"/></div>
                <p style="width: 300px;">戈特弗里德·威廉·莱布尼茨（Gottfried Wilhelm Leibniz，1646年7月1日－1716年11月14日），德国哲学家、数学家，历史上少见的通才，被誉为十七世纪的亚里士多德。他本人是一名律师，经常往返于各大城镇，他许多的公式都是在颠簸的马车上完成的，他也自称具有男爵的贵族身份。</p>
            </div>
            </div>

     <div class="row">
         <div class="span4">
            <div style="text-align: center;">  <img class="content" src="/images/newton.PNG"width="150" height="150"/></div>
                <p style="width: 300px;">艾萨克·牛顿（1643年1月4日—1727年3月31日）爵士，英国皇家学会会长，英国著名的物理学家，百科全书式的“全才”，著有《自然哲学的数学原理》、《光学》。</p>
            </div>

            <div class="span4">
                <div style="text-align: center;">  <img class="content" src="/images/tsl.jpg"width="150" height="150"/></div>
                <p style="width: 300px;">尼古拉·特斯拉（Nikola Tesla，1856年7月10日—1943年1月7日），塞尔维亚裔美籍发明家、物理学家、机械工程师、电气工程师。</p>
            </div> 

           </div>
           
           </div>
           

<h3>联系我</h3>
           <div id="info3">
                <div class="row">
           <div class="span1">
               <p>电话号码：</p><br>
              
            
           </div>
           <div class="span2">
             <p><input type="number" name="number" size="20" ></p>
               

               
           </div>
           </div>
           <div class="row">
            <div class="span1">
                
               
                <p>邮件：</p>
            </div>
            <div class="span2">
           
                 <p><input type="email" name="email" size="20"></p>
 
                
            </div>
            </div>
            <div class="row">
                <div class="span2">
                    
                   
                    <p><input type="button" value="提交"></p>
                </div>
               
        </div>
        </div>
      
    </body>
</html>